<template>
  <div class="info-box">
    <Cell
      is-link
      @click="$router.push({ path: '/editname', query:{ name: ltdInfo.name, type:'ltdName' } })"
      class="cell-box"
    >
      <div class="img-box">{{ ltdInfo.name }}</div>

      <template slot="title">
        <span class="custom-text">企业名称</span>
      </template>
    </Cell>
    <Cell is-link @click="showtype = true" class="cell-box cell-box2">
      <div class="img-box">{{ltdInfo.industryName}}</div>

      <template slot="title">
        <span class="custom-text">所属行业</span>
      </template>
    </Cell>
    <Cell is-link @click="showarea = true" class="cell-box">
      <div class="img-box">{{ ltdInfo.areainfo }}</div>

      <template slot="title">
        <span class="custom-text">区域</span>
      </template>
    </Cell>
    <Cell is-link @click="showtime = true" class="cell-box cell-box2">
      <div class="img-box">{{ dateFormatMethods(ltdInfo.establishDate, 'yyyy-MM-dd') }}</div>

      <template slot="title">
        <span class="custom-text">成立时间</span>
      </template>
    </Cell>
    <Cell is-link @click="shownature = true" class="cell-box cell-box2">
      <div class="img-box">{{ltdInfo.enterpriseNames}}</div>

      <template slot="title">
        <span class="custom-text">企业性质</span>
      </template>
    </Cell>
    <Popup v-model="showtime" position="bottom">
      <DatetimePicker
        v-model="ltdInfo.establishDate"
        type="date"
        title="成立时间"
        :columns-order="['year', 'month', 'day']"
        :formatter="formatter"
        @confirm="savetime"
        :max-date="maxDate"
        :min-date="minDate"
        @cancel="showtime = false"
      />
    </Popup>
    <Popup v-model="showarea" position="bottom">
      <Picker
        show-toolbar
        title="区域"
        value-key="name"
        :columns="cityList"
        @cancel="showarea = false"
        @confirm="savearea"
      />
    </Popup>
    <Popup v-model="showtype" position="bottom">
      <Picker
        show-toolbar
        title="所属行业"
        :columns="typeArr"
        value-key="name"
        @cancel="showtype = false"
        @confirm="savetype"
      />
    </Popup>
    <Popup v-model="shownature" position="bottom">
      <Picker
        show-toolbar
        title="企业性质"
        :columns="natureArr"
        value-key="value"
        @cancel="shownature = false"
        @confirm="savenature"
      />
    </Popup>
  </div>
</template>

<script>
import { Cell, Popup, DatetimePicker, Picker } from "vant";
import {
  getEnterpriseInfo,
  getCity,
  getIndustryTree,
  updateEnterprise,
} from "api/Enterprise";
import { getLtdType } from "api/User";
import dateFormat from "utils/dateFormat";

export default {
  components: {
    Cell,
    Popup,
    DatetimePicker,
    Picker,
  },
  data() {
    return {
      ltdInfo: {
        establishDate: "",
        industryName: "",
        areainfo: "",
        pkId: "",
      },
      maxDate: new Date(),
      minDate: new Date("2000-01-01"),
      showtime: false,
      showarea: false,
      showtype: false,
      shownature: false,
      cityList: [],
      typeArr: [],
      natureArr: [],
    };
  },
  methods: {
    dateFormatMethods(date, format) {
      return dateFormat(new Date(date), format);
    },
    showName() {},
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      return val;
    },
    // 修改时间
    savetime(date) {
      this.ltdInfo.establishDate = date;
      this.ltdInfo.pkId = this.ltdInfo.enterpriseId;
      updateEnterprise(this.ltdInfo).then(({ code, message }) => {
        if (!code) {
          this.$toast("更改成功！");
        } else {
          this.$toast(message);
        }
      });
      this.showtime = false;
    },
    savearea(value, index) {
      this.ltdInfo.areainfo = value.join("/");
      let arr = [];
      function removeCityChildren(list) {
        if (Object.prototype.toString.call(list) == "[object Array]") {
          list.forEach((el) => {
            switch (el.name) {
              case value[0]:
                arr.push(el.code);
                break;
              case value[1]:
                arr.push(el.code);
                break;
              case value[2]:
                arr.push(el.code);
                break;
            }
            removeCityChildren(el.children);
          });
        }
      }

      removeCityChildren(this.cityList);
      arr = arr.splice(0, 3);

      this.ltdInfo.areaCode = arr[2];
      this.ltdInfo.cityCode = arr[1];
      this.ltdInfo.proinceCode = arr[0];

      this.ltdInfo.pkId = this.ltdInfo.enterpriseId;
      updateEnterprise(this.ltdInfo).then(({ code, message }) => {
        if (!code) {
          this.$toast("更改成功！");
        } else {
          this.$toast(message);
        }
      });
      this.showarea = false;
    },
    savetype(value, index) {
      this.ltdInfo.industry = value.code;
      this.ltdInfo.industryName = value.name;
      this.showtype = false;

      this.ltdInfo.pkId = this.ltdInfo.enterpriseId;
      updateEnterprise(this.ltdInfo).then(({ code, message }) => {
        if (!code) {
          this.$toast("更改成功！");
        } else {
          this.$toast(message);
        }
      });
    },
    savenature(value, index) {
      this.ltdInfo.enterpriseNames = value.value; // 名字
      this.ltdInfo.enterpriseNature = value.key; // key

      this.ltdInfo.pkId = this.ltdInfo.enterpriseId;
      updateEnterprise(this.ltdInfo).then(({ code, message }) => {
        if (!code) {
          this.$toast("更改成功！");
        } else {
          this.$toast(message);
        }
      });

      this.shownature = false;
    },
    getLtdTypes() {
      // 获取公司类型
      getLtdType({ code: "enterprise_nature" }).then(({ data }) => {
        data.forEach((el) => {
          if (el.key == this.ltdInfo.enterpriseNature) {
            this.ltdInfo.enterpriseNames = el.value;
          }
        });
        this.natureArr = data;
      });
    },
    getIndustry() {
      getIndustryTree().then(({ data }) => {
        data.industryTreeList.forEach((el) => {
          if (el.code == this.ltdInfo.industryCode) {
            this.ltdInfo.industryName = el.name;
          }
          delete el.children;
        });
        this.typeArr = data.industryTreeList;
      });
    },
    getCitys() {
      // 获取城市选择
      getCity().then(({ data }) => {
        const arr = [];
        let { areaCode, cityCode, provinceCode } = this.ltdInfo;

        // 递归删除城市最后的空选项
        function removeCityChildren(list) {
          list.forEach((el) => {
            if (el.code == areaCode) arr.push(el.name);

            if (el.code == cityCode) arr.push(el.name);

            if (el.code == provinceCode) arr.push(el.name);

            if (!el.children.length) delete el.children;
            else removeCityChildren(el.children);
          });
        }

        removeCityChildren(data.areaTree);
        this.ltdInfo.areainfo = arr.join("/");
        this.cityList = data.areaTree;
      });
    },
  },
  mounted() {
    // 获取公司信息
    getEnterpriseInfo().then(({ data }) => {
      data.establishDate = new Date(data.establishDate);
      this.ltdInfo = data;
      localStorage.enterpriseId = data.enterpriseId;

      this.getLtdTypes();
      this.getIndustry();
      this.getCitys();
    });
  },
};
</script>

<style lang="stylus" scoped>
@import './../../assets/styl/mixin.styl'
.bottom-box
  position fixed
  bottom 0
  z-index 2
  background $infoColor
.cell-box
  display flex
  justify-content space-between
  font-size rem($ft16)
  .my-box
    width rem(45)
    height rem(45)
    margin-left 50%
    text-align right
    img
      height 100%
      width 100%
  .img-text
    height rem(60)
    line-height rem(60)
.cell-box1
  .van-cell__right-icon
    height rem(67.83)
    line-height rem(67.83)
</style>
<style lang="stylus" scoped>
@import './../../assets/styl/mixin.styl'
.van-cell::after
  right 0 !important
</style>
